<template>
	<view class="categoryItemOuter">
		<ul class="categoryItem">
			<li v-for="item in categoryData" :key="item.id" @click="catSearch(item)">
				<image :src="item.image_url" mode=""></image>
				<p> {{item.name}} </p>
			</li>
		</ul>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		},
		props: {
			categoryData: {
				type: Array,
				default: [{
					id: '1',
					title: ' T恤 ',
					image_url: ''
				}],
			}
		},
		methods: {
			catSearch(data) {
				console.log(data);
				uni.navigateTo({
					url: '/pages/categorySearch/categorySearch?keyWord=' + data.name
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.categoryItemOuter {
		width: 100%;
		height: 100%;

		.categoryItem {
			padding: 10px;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: space-between;

			li {
				width: 30%;
				height: 100px;
				padding-bottom: 10px;
				text-align: center;
				margin-bottom: 20px;
				font-size: 14px;

				image {
					width: 100%;
					height: 80%;
				}
			}
		}
	}
</style>